<template>

<div class="ranklist-detail">
    <div class="pic">
      <van-icon name="arrow-left" @click="goback()" />
      <van-image :src="picUrl" fit="cover"></van-image>
    </div>

    <div class="player">
        <img :src="rankInfo.picUrl" alt="">
        <span>{{rankInfo.title}}</span>
        <span>{{rankInfo.titleDetail}}</span>
        <span>更新时间：{{updataTime}}</span>
        <van-button type="primary">播放</van-button>
    </div>

    <div class="ranklist">
        <ul>
            <li v-for="(item,id) in rankList" :key="item.id"       @click="selectSong(item)">
                <span>{{id+1}}.{{item.name}}</span>
                <span>{{item.singerName}}</span>
            </li>
        </ul>
    </div>


</div>

</template>

<script>
import axios from "axios";
export default {
    data(){
        return{
            rankList:[],//榜单详情列表
            rankInfo:{},//榜单基本信息
            updataTime:""//榜单更新时间
        }
    },
    created(){
        this.getData()
    },
    methods:{
        getData(){
         axios.get("/jsososo/top", {
             params: {
                 id: this.$route.params.id
             }
         })
         .then(res => {
             console.log(res.data);
             this.rankList=res.data.data.list
             this.rankInfo=res.data.data.info
             this.updataTime=res.data.data.update
         }) 
         .catch(err=>{
             console.error(err);
         })

    },
        goback() {
      this.$router.go(-1);
    },
    selectSong(item){
        const id=item.mid
        this.$router.push({path:`/player/${id}`})
        this.$store.commit('setSinger',item)

    }
    
}
}
</script>

<style scoped>
.player img{
    width: 50%;
    border-radius: 1rem;
}
.player span{
    display: block;
}
.ranklist li{
    text-align: left;
}
.ranklist span{
    display: block;
}
.pic {
float: left;
  position: relative;
}

</style>